<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const toData = () => {
    router.push({ name: 'Login' })
}
</script>

<template>
    <div class="hero min-h-screen bg-base-200">
        <div class="hero-content text-center flex-col">
            <div class="max-w-full my-4">
                <h1 class="text-5xl font-bold"> 一站式地理信息数据处理与共享平台</h1>
                <h3 class="text-1xl font-bold py-5"> 地理信息的在线编辑、计算、管理与共享，尽在掌握。</h3>
                <p>欢迎来到我们的地理信息数据处理与共享平台！</p>
                <p>我们提供高效、便捷的在线工具，助您轻松完成数据的上传、编辑、保存和计算。</p>
                <p>无论您需要进行空间、长度还是面积计算，我们的平台都能为您提供精确的结果。</p>
                <button class="btn btn-primary m-7" @click="toData">立即体验</button>
            </div>
            <div class="max-w-full flex justify-around flex-warp" style="flex-wrap: wrap;">
                <div class="card bg-base-100 w-196 shadow-xl m-7">
                    <div class="card-body">
                        <h2 class="card-title">数据在线编辑</h2>
                        <p>直接在网页上上传您的地理数据，并进行实时编辑，无需繁琐的下载和安装。</p>
                    </div>
                </div>
                <div class="card bg-base-100 w-196 shadow-xl m-7">
                    <div class="card-body">
                        <h2 class="card-title">数据保存与格式转换</h2>
                        <p>数据自动保存，支持多种格式转换，满足您的多样化需求。</p>
                    </div>
                </div>
                <div class="card bg-base-100 w-196 shadow-xl m-7">
                    <div class="card-body">
                        <h2 class="card-title">可视化样式配置</h2>
                        <p>自定义可视化样式，让您的数据展示更加生动和直观。</p>
                    </div>
                </div>
                <div class="card bg-base-100 w-196 shadow-xl m-7">
                    <div class="card-body">
                        <h2 class="card-title">行政区划支持</h2>
                        <p> 提供详细的行政区划数据，方便您进行精确的地理信息管理。</p>
                    </div>
                </div>
                <div class="card bg-base-100 w-196 shadow-xl m-7">
                    <div class="card-body">
                        <h2 class="card-title">数据公开与分享</h2>
                        <p>通过验证码机制，允许他人查看和下载您的数据，实现数据的最大化利用。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>

</style>
